@charset "utf-8";
@import "common";
body {
    .carousel {
        .carousel-inner {
            .item {
                background-color: #c0b84c;
                img {
                    margin: 0 auto;
                }
            }
        }
    }
    .hot-HB {
        >.container {
            background-image: url(../img/game/games2.png);
            background-repeat: no-repeat;
            background-position: calc(0% + 10px) 0;
            padding-bottom: 63px;
            @media(max-width: 992px) {
                background-image: none;
            }
            .hot-box {
                .Hunter-Blade {
                    .hb-box {
                        .hb-text {
                            >h2 {
                                font-size: 30px;
                                text-align: end;
                                margin-top: 33px;
                                margin-bottom: 18px;
                                @media(max-width: 992px) {
                                    text-align: start;
                                }
                            }
                            >p {
                                font-size: 12px;
                                text-align: end;
                                line-height: 24px;
                                margin-bottom: 30px;
                                @media(max-width: 992px) {
                                    text-align: start;
                                }
                            }
                        }
                        .hb-img {
                            text-align: center;
                            >img {
                                margin-bottom: 30px;
                            }
                        }
                    }
                }
            }
        }
    }
    .hot-OM {
        >.container {
            background-image: url(../img/game/games11.png);
            background-repeat: no-repeat;
            background-position: 100% calc(0% + 30px);
            padding-bottom: 124px;
            @media(max-width: 992px) {
                background-image: none;
            }
            .om-box {
                .On-master {
                    .Onmaster-box {
                        .Onmaster-box {
                            >h2 {
                                font-size: 30px;
                                margin-top: 0;
                                margin-bottom: 21px;
                            }
                            >p {
                                font-size: 12px;
                                line-height: 24px;
                                margin-bottom: 30px;
                            }
                        }
                        .Onmaster-img {
                            text-align: center;
                            >img {
                                margin-bottom: 30px;
                            }
                        }
                    }
                }
            }
        }
    }
    .case {
        padding-bottom: 49px;
        >.container {
            >.row {
                .case-box {
                    >h1 {
                        font-size: 36px;
                        margin-top: 0;
                        margin-bottom: 38px;
                    }
                    .first-box {
                        .ZXY-box {
                            margin-bottom: 43px;
                            position: relative;
                            >div {
                                >.zxy-img {
                                    position: relative;
                                    overflow: hidden;
                                    >img {
                                        width: 100%;
                                    }
                                    @media(max-width: 844px) {
                                        padding: 0 15%;
                                    }
                                    >.coverage {
                                        height: 100%;
                                        position: absolute;
                                        top: 100%;
                                        background-color: #2d2c31;
                                        opacity: 0.9;
                                        transition-property: transform;
                                        transition-duration: 2s;
                                        >p {
                                            font-size: 12px;
                                            color: white;
                                        }
                                        @media(max-width: 844px) {
                                            width: 70%;
                                        }
                                    }
                                }
                            }
                            >p {
                                text-align: center;
                                margin-top: 13px;
                                margin-bottom: 0;
                            }
                            >div:hover .coverage {
                                height: 100%;
                                transform: translateY(-100%);
                            }
                        }
                    }
                }
            }
        }
    }
}